import { defineComponent, h, ref } from 'vue';

import FosoTable from './index.vue';
import { type VxeGridInstance, type VxeGridProps } from './type';

// 函数式组件写法
export function useFosoTable(options: VxeGridProps) {
  // 创建一个ref用于获取组件实例，并指定类型
  const componentApi = ref();

  const domeCom = defineComponent((props, { attrs, slots }) => {
    const propspro = {
      gridOptions: options, // 将 options 作为 gridOptions prop 传递
      ...props,
    };
    return () => {
      // 创建一个对象来存储所有插槽
      const slotObj: Record<string, any> = {};
      // 动态添加所有可用的插槽
      Object.keys(slots).forEach((slotName) => {
        slotObj[slotName] = slots[slotName];
      });

      // 确保默认插槽包含我们想要的内容
      return h(
        FosoTable,
        {
          ...propspro,
          ...attrs,
          ref: componentApi, // 添加ref引用
        } as any, // 使用类型断言解决类型不匹配问题
        slotObj, // 接收所以插槽
      );
    };
  });
  // 创建一个代理对象，用于获取组件实例的属性
  const apiProxy = new Proxy(
    {},
    {
      get(_, prop) {
        return componentApi.value?.VxeGridRef?.[prop];
      },
    },
  );

  return {
    FosoTable: domeCom,
    FosoTableApi: apiProxy as unknown as VxeGridInstance, // 使用 computed 包装，确保响应式
    // FosoTableApi: ref(componentApi), // 使用 computed 包装，确保响应式
  };
}
